<template>
	<view class="mes-c">
		<view class="mes-box flex flex-x-b flex-y-c" v-for="item in list" @click="detail(item.category_id)">
			<view class="flex flex-y-c">
				<view class="m-image">
					<image src="../../static/41.png" alt="">
				</view>
				<view class="">
					<view class="">
						{{item.name}}
					</view>
					<view class="">
						你的地球日优惠福利来啦
					</view>
				</view>
			</view>
			
			<view class="m-image1">
				<image src="../../static/right.png" alt="">
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/recovery'
	export default{
		data(){
			return{
				list:[]
			}
		},
		onLoad() {
			this.getPageData()
		},
		methods:{
			detail(e){
				uni.navigateTo({
					url:'/pages/message-center/list?id='+e
				})
			},
			getPageData(callback) {
			  const app = this
			  const pageId = app.options.pageId || 0
			  Api.categoryList()
			    .then(result => {
					console.log(result)
					this.list=result.data.list
			      
			    })
			    .finally(() => callback && callback())
			},
		}
	}
</script>

<style>
	.flex{
		display: flex;
	}
	.flex-x-b{
		justify-content: space-between;
	}
	.flex-y-c{
		align-items: center;
	}
	.mes-box{
		background: #FFFFFF;
		padding: 30rpx 60rpx;
		margin-top: 30rpx;
	}
	.m-image{
		width: 53rpx;
		height: 49rpx;
		margin-right: 30rpx;
	}
	.m-image image{
		width: 100%;
		height: 100%;
	}
	.m-image1{
		width: 15rpx;
		height: 26rpx;
	}
	.m-image1 image{
		width: 100%;
		height: 100%;
	}
</style>